<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css


import { onBeforeUnmount, shallowRef, onMounted, computed } from 'vue'

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// my code 
const props = defineProps(['text'])
// const emit = defineEmits(['textChange'])
const emit = defineEmits(['update:text'])

const value = computed({
  get() {
    return props.text;
  },
  set(v) {
    emit('update:text', v)
  }
});


// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
// const valueHtml = ref('')
// watch(valueHtml, (newValueHtml) => {
//   emit('textChange', newValueHtml)
// })
const mode = 'default'

// 模拟 ajax 异步获取内容
onMounted(() => {
  // setTimeout(() => {
  //   valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  //   console.log(DomEditor.getToolbar(editorRef.value).getConfig().toolbarKeys)
  //   }, 1500)
    
})

const toolbarConfig = {
  excludeKeys: [
    "todo",
    'group-image',
    'group-video',
    "fullScreen"
  ]
}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  
}

</script>



<template>
    <div>
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 320px; overflow-y: hidden;"
        v-model="value"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
</template>